<template>
  <button @click="shuffle">打乱数组排列顺序</button>
  <transition-group tag="list" move-class="move">
    <div class="item" v-for="item in list" :key="item.id">{{ item.num }}</div>
  </transition-group>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let list = ref<any[]>(
  Array.apply(null, { length: 81 } as number[]).map((_, index) => {
    // _表示占位
    return {
      id: index,
      num: (index % 9) + 1
    };
  })
);
// console.log(list);

// 使用 lodash 库的 shuffle 函数，shuffle：返回打乱的新数组。
import _ from 'lodash';

const shuffle = (): void => {
  //  list = _.shuffle(list);// 使用 reactive 从时候由于shuffle返回打乱的新数组，丢失了响应式。
  list.value = _.shuffle(list.value);
};
</script>

<style lang="scss" scoped>
list {
  display: flex;
  flex-wrap: wrap;
  // 一行放9个,计算属性添加空格
  // width: calc(25px * 9 +9px); 报错
  width: calc(25px * 9 + 2 * 9px);
  .item {
    width: 25px;
    height: 25px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
// 上面是name="move" 选择器为 .move-move
// 上面是move-class="move" 选择器为 .move
.move {
  transition: all 1s ease;
}
</style>
